/**
 * Created by Administrator on 2018/5/17.
 */
function animate(demo,target){
  if(demo.timeId){   // js是动态的弱类型语言,可以随时给对象添加属性和方法
    // 对象的属性和变量的作用是一样的,都是用来存储数据的，这个地方都是用来存储定时器的编号的
    clearInterval(demo.timeId)   //  如果有定时的话，一定要先清除定时器
  }

  demo.timeId = setInterval(function () {  // 开启一个定时器
    // 2.1获取盒子当前的位置
    var leader = demo.offsetLeft   // 先获取标签当前的位置
    var step = 20   // 设置一个固定的步长
    step =  leader < target? step : -step  //  用三元表达式来判断当前的步长是正的还是负的
    if (Math.abs(leader-target)>Math.abs(step)) {  // 判断当前需要移动到的位置和目标位置的关系
      leader += step    // 简写的形式   在当前的位置基础上加一个固定的步长
      demo.style.left = leader + 'px'     // 给盒子设置需要移动到的位置
    } else {
      demo.style.left = target + 'px'   // 最后一步为了能够到达指定的目标位置，是可以自己设置的
      clearInterval(demo.timeId) // 清除定时器
    }
  }, 15)
}